<template>
  <div class="wrapper" id="wrapper">
    <div class="container">
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
        class="form"
        ref="ruleForm"
        :rules="rules"
      >
        <el-form-item class="form_item" label="用户名" prop="id">
          <el-input
            v-model="formLabelAlign.id"
            placeholder="邮箱/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item class="form_item" label="密码" prop="password">
          <el-input
            v-model="formLabelAlign.password"
            placeholder="密码6-18位"
            type="password"
            @keyup.enter.native="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <el-form-item class="btnGroup">
          <el-button
            :loading="btn_loading"
            id="btn"
            type="primary"
            @click="submitForm('ruleForm')"
            >登录</el-button
          >
          <el-button class="btn" @click="openRegister">注册</el-button>
        </el-form-item>
      </el-form>
      <!-- 注册框 -->
      <el-dialog title="注册" :visible.sync="dialogFormVisible" ref="form">
        <el-form :model="form" :rules="registRules">
          <el-form-item label="用户名" :label-width="formLabelWidth" prop="id">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            :label-width="formLabelWidth"
            prop="password"
          >
            <el-input
              v-model="form.password"
              autocomplete="off"
              type="password"
            ></el-input> </el-form-item
          ><el-form-item
            label="确认密码"
            :label-width="formLabelWidth"
            prop="checkPassword"
          >
            <el-input
              v-model="form.checkPassword"
              autocomplete="off"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属地区" :label-width="formLabelWidth" prop="origin">
            <el-input v-model="form.origin" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="register" :loading="registLoading">
            确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { login, register } from "../api/login";
export default {
  mounted() {
    this.formLabelAlign.id = localStorage.id || "";
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      btn_loading: false,
      dialogFormVisible: false,
      registLoading: false,
      formLabelAlign: {
        id: "",
        password: "",
      },
      form: {
        id: "",
        password: "",
        checkPassword: "",
      },
      formLabelWidth: "80px",
      rules: {
        id: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
      registRules: {
        id: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        checkPassword: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.btn_loading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          login(this.formLabelAlign)
            .then((result) => {
              setTimeout(() => {
                this.btn_loading = false;
              }, 300);
              // this.btn_loading = false
              if (result.data == false) this.openMessage();
              else {
                this.$message({
                  showClose: true,
                  message: "登录成功",
                  type: "success",
                });
                localStorage.setItem("login", true);
                localStorage.setItem("id", this.formLabelAlign.id);
                setTimeout(() => {
                  this.$router.push("/paint/mainWork");
                }, 300);
              }
            })
            .catch(() => {
              this.$message({
                showClose: true,
                message: "登录失败，请检查你的网络连接",
                type: "error",
              });
              this.btn_loading = false;
            });
        } else {
          return false;
        }
      });
    },
    openMessage() {
      this.$message({
        showClose: true,
        message: "用户名或密码不正确熬",
        type: "error",
      });
    },
    openRegister() {
      this.dialogFormVisible = true;
    },
    register() {
      this.registLoading = true;
      let data = {
        name: this.form.id,
        id: this.form.id,
        password: this.form.password,
      };
      register(data).then((result) => {
        if (result.data) {
          this.$message({
            showClose: true,
            message: "注册成功",
            type: "success",
          });
          this.registLoading = false;
          this.dialogFormVisible = false;
        } else {
          this.$message({
            showClose: true,
            message: "注册失败熬",
            type: "error",
          });
          this.registLoading = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.container {
  width: 500px;
  margin: 0 auto;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrapper {
  display: flex;
  align-items: center;
  height: 100vh;
}
.form {
  width: 80%;
  min-width: 200px;
}
.form_item {
  height: 50px;
}
#btn {
  margin-left: -70px;
  margin-right: 30px;
}
</style>